<template>
	<view class="main">
		<van-toast id="van-toast" />
		<tou_hand1 handtitle='充电区费率'></tou_hand1>
		<view class="show">
			<view class="sone" v-for="(item, index) in showlit" :key="index">
				<!-- <van-cell is-link @click="showPopup(index)">{{item.name}}</van-cell> -->
				<view class="sonetap" @click="showPopup(index,item.id)">
					<view class="tapleft">{{item.areaName}}</view>
					<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg/jtright.png"></image>
				</view>
				<van-popup :show="item.show">
					<view class="stwo">
						<view class="stwohand">
							<image src="static/https://qiniu.jxyutuo.com/yanqin/tabBarimg/cdqclose.png" @click="showclose(index)"></image>
						</view>
						<view class="stwofoot">
							<view class="sfone">
								<view class="sfoneleft">
									小区： 
								</view>
								<view class="sfoneright">
									{{list.projectName}}
								</view>
							</view>
							<view class="sfone">
								<view class="sfoneleft">
									充电区：
								</view>
								<view class="sfoneright">
									{{list.areaName}}
								</view>
							</view>
							<view class="sfone">
								<view class="sfoneleft">
									<span style="color: #F08300;font-weight: 700;">{{list.usablePort}}</span>个可用|
								        一共<span style="color: #F08300;font-weight: 700;">{{list.totalPort}}</span>个端口
								</view>
							</view>
							<view class="sftwo">
								<view class="sftwohand">
									<view class="sftwohandone"></view>
									<view class="sftwohandtwo">费率信息</view>	
									<view class="sftwohandone"></view>
								</view>
								<view class="sftwofoot" v-show="monthlyList.length>0">
									<view class="montleft">
										包月：
									</view>
									<view class="montright">
										<view class="montone" v-for="(item, index) in monthlyList" :key="index">
											<view v-show="item.types=='A1'">
											
												<view>{{item.standard}}元/{{item.numStr}}小时/月</view>
											</view>
											<view v-show="item.types=='A3'">
											
												<view>{{item.standard}}元/{{item.numStr}}次/月</view>
											</view>
											<view v-show="item.types=='A4'">
												<view v-show="item.minPower!=item.maxPower">
													{{item.minPower}}瓦--{{item.maxPower}}瓦{{item.standard}}元/月(共{{item.numStr}}小时)
												</view>
												<view v-show="item.minPower==item.maxPower">
													{{item.maxPower}}瓦以上{{item.standard}}元/月(共{{item.numStr}}小时)
												</view>
											</view>
											<view v-show="item.types=='A6'">
												<view v-show="item.minPower!=item.maxPower">
													{{item.minPower}}瓦--{{item.maxPower}}瓦{{item.standard}}元/月(共{{item.numStr}}次)
												</view>
												<view v-show="item.minPower==item.maxPower">
													{{item.maxPower}}瓦以上{{item.standard}}元/月(共{{item.numStr}}次)
												</view>
											</view>
											<view v-show="item.types=='A5'">
												<view v-show="item.minPower!=item.maxPower">
													{{item.minPower}}瓦--{{item.maxPower}}瓦{{item.standard}}元/月({{item.numStr}}小时/天)
												</view>
												<view v-show="item.minPower==item.maxPower">
													{{item.maxPower}}瓦以上{{item.standard}}元/月({{item.numStr}}小时/天)
												</view>
											</view>
											<view v-show="item.types=='A7'">
												<view v-show="item.minPower!=item.maxPower">
													{{item.minPower}}瓦--{{item.maxPower}}瓦{{item.standard}}元/月({{item.numStr}}次/天)
												</view>
												<view v-show="item.minPower==item.maxPower">
													{{item.maxPower}}瓦以上{{item.standard}}元/月({{item.numStr}}次/天)
												</view>
											</view>
											
										</view>
										
									</view>
								</view>
								<view class="sftwofoot" v-show="oftenList.length>0">
									<view class="montleft">
										常用：
									</view>
									<view class="montright">
										<view class="montone" v-for="(item, index) in oftenList" :key="index">
											<view v-show="item.types=='B2'">
												电费:{{item.standard}}元/度
											</view>
											<view v-show="item.types=='B5'">
												电费:{{item.standard}}元/度
											</view>
											<view v-show="item.types=='B2'&&item.num">
												服务费:{{item.num/100}}元/小时
											</view>
											<view v-show="item.types=='B5'&&item.num">
												服务费:{{item.num/100}}元/度
											</view>
											<view v-show="item.types=='B1'">
												<view v-show="item.minPower!=item.maxPower">
													{{item.minPower}}瓦--{{item.maxPower}}瓦{{item.standard}}元/小时
												</view>
												<view v-show="item.minPower==item.maxPower">
													{{item.maxPower}}瓦以上{{item.standard}}元/小时
												</view>
											</view>
											<view v-show="item.types=='B3'">
												<view v-show="item.minPower!=item.maxPower">
													{{item.minPower}}瓦--{{item.maxPower}}瓦{{item.standard}}元/次
												</view>
												<view v-show="item.minPower==item.maxPower">{{item.maxPower}}瓦以上{{item.standard}}元/次
												</view>
											</view>
											<view v-show="item.types=='B4'">
												<view v-show="item.minPower!=item.maxPower">{{item.minPower}}瓦--{{item.maxPower}}瓦
													1元{{item.standard}}小时</view>
												<view v-show="item.minPower==item.maxPower">{{item.maxPower}}瓦以上
													1元{{item.standard}}小时</view>
											</view>
											
										</view>
										<view class="montone">
											最低消费:{{oftenminMoney}}元
										</view>
									</view>
								</view>
								<view class="sftwofoot" v-show="temporaryList.length>0">
									<view class="montleft">
										临时：
									</view>
									<view class="montright">
										<view class="montone" v-for="(item, index) in temporaryList" :key="index">
											<view v-show="item.minPower!=item.maxPower">{{item.minPower}} ~ {{item.maxPower}}瓦- {{item.standard}}元/小时</view>
											<view v-show="item.minPower==item.maxPower">{{item.maxPower}}瓦以上- {{item.standard}}元/小时</view>
										</view>
										<view class="montone">
											最低消费:{{lsminMoney}}元
										</view>
									</view>
									
								</view>
							</view>
						</view>
					</view>
				</van-popup>
			</view>
		</view>
	</view>
</template>

<script>
	import tou_hand1 from '../../components/tou_hand2/tou_hand2.vue'
	export default {
		components: {tou_hand1},
		mounted() {

		},

		data() {
			return {
				showlit:[],
				list:{},
				projectId:'',
				monthlyList:[],//包月数据
				oftenList:[],//常用数据
				temporaryList:[],//临时数据
				oftenminMoney:'',//常用最低消费
				lsminMoney:'',//临时最低消费
			}
		},
		onLoad(options) {
			if(options.id){
				this.projectId=options.id
			}
			var projectName=uni.getStorageSync('user').projectName
			if(!projectName){
				this.$toast.fail('暂未绑定充电区')
				return
			}
		},
		onShow() {
			this.show()
		},
		methods: {
			// 附近充电区：获取列表
			show(){
				let data={
					projectId:this.projectId
				}
				this.$base.request('nearArea/list', 'GET', data)
					.then(res => {
						// uni.setStorageSync('userToken', res.data.data.token);
						if(res.data.code==200){
							if(res.data.data.length>0){
								for(var i=0;i<res.data.data.length;i++){
									res.data.data[i].show=false
								}
								this.showlit=res.data.data
							}else{
								this.showlit=[]
								this.$toast.fail('附近暂无充电区')
							}
							
						}else{
							this.$toast.fail(res.data.msg)
						}
						
					})
					.catch(err => {
					})
			},
			//打开详情
			showPopup(val,id) {
			   this.showlit[val].show = true;
			   let data={
			   	areaId:id
			   }
			   this.$base.request('nearArea'+'/'+id, 'GET')
			   	.then(res => {
			   		// uni.setStorageSync('userToken', res.data.data.token);
			   		if(res.data.code==200){
			   			this.list=res.data.data[0]
						var item=res.data.data[0]
						if(item.monthlyList.length>0){
							this.monthlyList=item.monthlyList
						}else{
							this.monthlyList=[]
						}
						if(item.oftenList.length>0){
							this.oftenList=item.oftenList
							this.oftenminMoney=item.minMoney
						}else{
							this.oftenList=[]
						}
						if(item.temporaryList.length>0){
							this.temporaryList=item.temporaryList
							this.lsminMoney=item.minMoneyTemporary
						}else{
							this.temporaryList=[]
						}
			   		}else{
						this.$toast.fail(res.data.msg)
					}
			   		
			   	})
			   	.catch(err => {
			   	})
			},
			//关闭详情
			showclose(val) {
			   this.showlit[val].show = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		height: 100vh;
		background-color:#2A3034;
		overflow-x: hidden;
		
		.show{
			width: 100%;
			.sone{
				width: 100%;
				box-sizing: border-box;
				padding: 0 32upx;
				.sonetap{
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30upx 0;
					border-bottom: 1upx solid #4f4f4f;
					.tapleft{
						font-size: 30upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #fff;
					}
					image{
						width: 12upx;
						height: 20upx;
					}
				}
				.stwo{
					width: 686upx;
					.stwohand{
						width: 100%;
						height: 142upx;
						background: url('https://qiniu.jxyutuo.com/yanqin/tabBarimg//cdqbg.png') no-repeat;
						background-size: cover;
						-webkit-background-size: cover;
						-o-background-size: cover;
						background-position: center 0;
						display: flex;
						flex-direction:row-reverse;
						align-items: center;
						box-sizing: border-box;
						padding-right: 36upx;
						image{
							width: 50upx;
							height: 50upx;
						}
					}
					.stwofoot{
						width: 100%;
						box-sizing: border-box;
						padding: 43upx 36upx;
						.sfone{
							width: 100%;
							display: flex;
							margin-bottom: 20upx;
							.sfoneleft{
								font-size: 30upx;
								font-family: PingFang SC Medium, PingFang SC Medium-Medium;
								font-weight: 700;
								color: #111111;
							}
							.sfoneright{
								font-size: 28upx;
								font-family: PingFang SC Medium, PingFang SC Medium-Medium;
								font-weight: 700;
								color: #3A4044;
								overflow:hidden;
								text-overflow:ellipsis;
								white-space:nowrap;
								width: 460upx;
							}
						}
						.sftwo{
							width: 100%;
							margin-top: 60upx;
							.sftwohand{
								font-size: 30upx;
								font-family: PingFang SC Bold, PingFang SC Bold-Bold;
								font-weight: 700;
								color: #333333;
								margin-bottom: 26upx;
								display: flex;
								justify-content: center;
								align-items: center;
								.sftwohandone{
									width: 106px;
									height: 1px;
									background: #4A4E52;
								}
								.sftwohandtwo{
									margin: 0 12upx;
								}
							}
							.sftwofoot{
								width: 100%;
								text-align: center;
								.montleft{
									font-size: 28upx;
									font-family: PingFangSC-Medium, PingFang SC;
									font-weight: 700;
									color: #111111;
									margin-bottom: 20upx;
								}
								.montright{
									width: 100%;
									.montone{
										font-size: 30upx;
										font-family: PingFangSC-Medium, PingFang SC;
										font-weight: 500;
										color: #111111;
										margin-bottom: 25upx;
									}
								}
							}
						}
					}
				}
			}
		}
		
	}
</style>
